<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>知乎文章转换器</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
      * {
        box-sizing: border-box;
      }
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background-color: #f5f5f5;
      }
      h1 {
        text-align: center;
        color: #333;
        margin-bottom: 1.5rem;
      }
      form {
        background-color: #fff;
        padding: 3rem;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        width: 100%;
        max-width: 600px;
        margin-bottom: 2rem;
      }
      label {
        font-size: 1.2rem;
        color: #333;
        margin-bottom: 1rem;
        display: block;
      }
      input, textarea {
        display: block;
        width: 100%;
        padding: 0.75rem;
        margin-bottom: 2rem;
        border: 1px solid #ccc;
        border-radius: 3px;
        font-size: 1.2rem;
      }
      button {
        display: block;
        width: 100%;
        padding: 0.75rem;
        background-color: #007bff;
        border: none;
        color: #fff;
        font-size: 1.2rem;
        border-radius: 3px;
        cursor: pointer;
        text-transform: uppercase;
      }
      button:hover {
        background-color: #0056b3;
      }
      .social-links {
        margin-bottom: 1rem;
        text-align: center;
      }
      .social-links a {
        margin: 0 10px;
        color: #333;
        font-size: 24px;
      }
      .caution {
        color: red;
        font-size: 0.8rem;
        text-align: center;
      }
      footer {
        font-size: 0.9rem;
        color: #666;
        text-align: center;
      }
    </style>
  </head>
  </head>
  <body>
    <form method="POST" action="/">
      <h1>知乎文章转换器</h1>
      <label for="url">知乎文章、回答或专栏的 URL：</label>
      <input type="url" name="url" id="url" required />
      <label for="cookies">知乎 Cookies：</label>
      <textarea name="cookies" id="cookies" rows="4" required></textarea>
      <p
        style="
          text-align: center;
          color: blue;
          cursor: pointer;
          font-size: 12px;
        "
        onclick="window.open('/get-cookies', '_blank')"
      >
        如何获取知乎 Cookies？
      </p>
      <p class="caution">
        注意：虽然本网站不会保留任何记录，但使用 Cookie 仍有风险，建议前往
        GitHub 自行部署。
      </p>
      <button type="submit">转换为 Markdown</button>
    </form>
    <div class="social-links">
      <a href="https://github.com/chenluda/zhihu-download" target="_blank" title="GitHub"><i class="fab fa-github"></i></a>
      <a href="https://www.zhihu.com/people/Glenn" target="_blank" title="Zhihu"><i class="fab fa-zhihu"></i></a>
      <a href="mailto:chenluda01@gmail.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a>
    </div>
    <footer>&copy; 2023 Glenn. All rights reserved.</footer>
  </body>
</html>
